Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন এবং ওয়েবসাইটের জন্য সহজ এবং রেসপন্সিভ ন্যাভবার এবং ড্রপডাউন মেনু তৈরি করতে সাহায্য করে। Pure.CSS-এর গ্রিড সিস্টেম এবং অন্যান্য প্রি-ডিফাইনড ক্লাস ব্যবহার করে আপনি দ্রুত রেসপন্সিভ ন্যাভবার এবং ড্রপডাউন মেনু তৈরি করতে পারেন।
Responsive Navbar in Pure.CSS
Responsive Navbar একটি গুরুত্বপূর্ণ উপাদান যেটি ওয়েবসাইট বা অ্যাপ্লিকেশনে নেভিগেশনের জন্য ব্যবহৃত হয় এবং এটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করে। Pure.CSS এর সাহায্যে আপনি সহজেই একটি রেসপন্সিভ ন্যাভবার তৈরি করতে পারেন।
1. Basic Responsive Navbar in Pure.CSS
Pure.CSS-এর সাহায্যে রেসপন্সিভ ন্যাভবার তৈরি করার জন্য, আমরা সাধারণত pure-menu এবং pure-menu-horizontal ক্লাস ব্যবহার করি। এই ক্লাসগুলি নেভিগেশন মেনু এবং লিস্ট আইটেমের জন্য ডিফল্ট স্টাইল প্রদান করে।
উদাহরণ: Basic Responsive Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom styles to handle the toggle button for small screens */
@media (max-width: 600px) {
.pure-menu-list {
display: none;
}
.pure-menu-open {
display: block;
}
}
</style>
</head>
<body>
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Logo</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
<!-- Hamburger button for small screens -->
<a href="javascript:void(0);" class="pure-menu-open pure-menu-link" onclick="toggleMenu()">☰</a>
</nav>
<script>
function toggleMenu() {
const menu = document.querySelector('.pure-menu-list');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}
</script>
</body>
</html>
ব্যাখ্যা:
pure-menu: এটি একটি সাধারণ ক্লাস যা ন্যাভবারের জন্য প্রাথমিক স্টাইল দেয়।pure-menu-horizontal: এই ক্লাসটি মেনুকে অনুভূমিকভাবে সাজায়।pure-menu-item: এই ক্লাসটি মেনু আইটেমের জন্য ব্যবহৃত হয়।pure-menu-link: এটি মেনু আইটেমের লিংকের জন্য ব্যবহৃত হয়।pure-menu-open: ছোট স্ক্রীন আকারের জন্য একটি হ্যামবার্গার মেনু বাটন তৈরি করা হয়েছে।toggleMenu(): একটি জাভাস্ক্রিপ্ট ফাংশন যা হ্যামবার্গার মেনুতে ক্লিক করলে ন্যাভবারের তালিকাকে দেখাতে বা লুকাতে সাহায্য করে।
Dropdown Menu in Pure.CSS
Dropdown Menu হল একটি জনপ্রিয় ইউআই উপাদান যা ব্যবহারকারীদের বিভিন্ন অপশন নির্বাচন করতে সাহায্য করে। Pure.CSS-এ ড্রপডাউন মেনু তৈরি করা সহজ এবং এটি একাধিক রেসপন্সিভ ফিচার এবং ক্লাসের মাধ্যমে কাস্টমাইজ করা যেতে পারে।
2. Basic Dropdown Menu in Pure.CSS
Pure.CSS-এ ড্রপডাউন মেনু তৈরি করার জন্য আমরা pure-menu-allow-hover এবং pure-menu-has-children ক্লাস ব্যবহার করি, যা ড্রপডাউন অপশনগুলোকে সঠিকভাবে তৈরি করতে সাহায্য করে।
উদাহরণ: Basic Dropdown Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pure-menu-dropdown {
position: relative;
}
.pure-menu-dropdown > .pure-menu-children {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
}
.pure-menu-allow-hover:hover > .pure-menu-children {
display: block;
}
</style>
</head>
<body>
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Logo</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item pure-menu-dropdown pure-menu-allow-hover">
<a href="#" class="pure-menu-link">Services</a>
<ul class="pure-menu-children">
<li><a href="#" class="pure-menu-link">Web Design</a></li>
<li><a href="#" class="pure-menu-link">Web Development</a></li>
<li><a href="#" class="pure-menu-link">SEO Services</a></li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</nav>
</body>
</html>
ব্যাখ্যা:
pure-menu-dropdown: এই ক্লাসটি ড্রপডাউন মেনুর জন্য ব্যবহার করা হয়।pure-menu-children: এটি ড্রপডাউন মেনুর সাব-আইটেমগুলির জন্য ব্যবহৃত হয়।pure-menu-allow-hover: এই ক্লাসটি হোভার ইফেক্ট তৈরি করে, যার মাধ্যমে ব্যবহারকারী যখন মাউস দিয়ে ড্রপডাউন মেনুতে হোভার করবেন, তখন সাব মেনু দেখাবে।display: noneএবংdisplay: block: ড্রপডাউন মেনু হোভার করার মাধ্যমে দেখানো হবে।
3. Responsive Dropdown Menu
Pure.CSS-এ আপনি ড্রপডাউন মেনুর স্টাইল কাস্টমাইজ করতে পারবেন যাতে এটি ছোট স্ক্রীনে (মোবাইল বা ট্যাবলেট) আরও ব্যবহারযোগ্য হয়। ছোট স্ক্রীনে একটি হ্যামবার্গার মেনু তৈরি করা যেতে পারে, যা ড্রপডাউন মেনু হিসেবে কাজ করবে।
উদাহরণ: Responsive Dropdown Menu with Hamburger
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Dropdown Menu with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Hide dropdown menu by default for small screens */
.pure-menu-list {
display: none;
}
/* Show the menu when hamburger button is clicked */
.pure-menu-open {
display: block;
}
@media (max-width: 600px) {
.pure-menu-list {
display: block;
}
}
</style>
</head>
<body>
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Logo</a>
<!-- Menu List -->
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item pure-menu-dropdown pure-menu-allow-hover">
<a href="#" class="pure-menu-link">Services</a>
<ul class="pure-menu-children">
<li><a href="#" class="pure-menu-link">Web Design</a></li>
<li><a href="#" class="pure-menu-link">Web Development</a></li>
<li><a href="#" class="pure-menu-link">SEO Services</a></li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
<!-- Hamburger Menu for small screens -->
<a href="javascript:void(0);" class="pure-menu-open pure-menu-link" onclick="toggleMenu()">☰</a>
</nav>
<script>
function toggleMenu() {
const menu = document.querySelector('.pure-menu-list');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}
</script>
</body>
</html>
ব্যাখ্যা:
- Hamburger Icon: ছোট স্ক্রীন আকারে ☰ বাটন (হ্যামবার্গার আইকন) দিয়ে মেনু চালু বা বন্ধ করা যাবে।
- CSS Media Queries: ছোট স্ক্রীনে, ন্যাভবারের মেনু আইটেমগুলি হ্যামবার্গার আইকনে রূপান্তরিত হবে।
- toggleMenu(): একটি জাভাস্ক্রিপ্ট ফাংশন যা হ্যামবার্গার মেনুতে ক্লিক করলে মেনুর প্রদর্শন পরিবর্তন করে।
Pure.CSS-এর সাহায্যে আপনি সহজেই একটি responsive navbar এবং dropdown menu তৈরি করতে পারেন। Pure-menu, pure-menu-horizontal এবং pure-menu-dropdown ক্লাস ব্যবহার করে, আপনি ন্যাভবার এবং ড্রপডাউন মেনুকে কাস্টমাইজ করতে পারেন এবং এগুলিকে রেসপন্সিভ করে তুলতে পারেন। ছোট স্ক্রীনের জন্য হ্যামবার্গার মেনু যুক্ত করা যায় যা ব্যবহারকারীদের জন্য আরও সুবিধাজনক। Pure.CSS-এর গ্রিড সিস্টেম এবং ইউআই উপাদানগুলির সাহায্যে আপনি দ্রুত এবং সহজেই এমন ফিচারগুলি তৈরি করতে পারবেন।
Read more
